<template>
    <B-Page class="scrollBox" ref="scrollBox">
    	<template slot="content">
    		<div class="policyBox">
				<Tabs :animated="false" :value="curItem" @on-click="policyFun">
			        <TabPane label="全部" name=""></TabPane>
			        <TabPane label="行业政策" name="2"></TabPane>
			        <TabPane label="最新资讯" name="1"></TabPane>
			    </Tabs>
			    <div class="policy-cont">
			    	<template v-if="newList == ''">
						<h3 class="title">暂无数据</h3>
			    	</template>
			    	<template v-else>
			    		<div class="policy-item" @click="getDetailFun(item._id, item.user, item.cateInfo)" v-for="(item,index) in newList">
				    		<h3>{{item.name}}</h3>
					    	<p class="tips">
					    		<Tag key="1" name="1">{{item.cateInfo == 2 ? '行业政策' : '最新资讯'}}</Tag>
					    		<span class="selfCreated">发布时间：{{new Date(item.selfCreated).Format("yyyy-MM-dd HH:mm:ss")}}</span>
					    		<span>阅读量：{{item.readingAmount}}</span>
					    	</p>
					    	<div class="article">
					    		段落示意：{{item.scope}}
					    	</div>
				    	</div>
			    		<pagination v-if="total > 0" :total="total" :current="queryParams.page" :pageSize='queryParams.rows' @change="init" style="position: relative"></pagination>
			    	</template>
			    </div>
    		</div>
    	</template>
    </B-Page>
</template>

<script>
    import BPage from 'components/BPage';  //页面框架
	import pagination from 'components/commons/pagination';  //分页
    export default {
    	components: { BPage, pagination },
    	data() {
    		return {
    			total: 0,
    			newList: [],  //获取的数据
    			curItem: '',
    			queryParams: {
					cate: '',	//1表示最新资讯，2表示行业政策, 空表示全部
                    page: 1,    //第几页
                    rows: 10    //每页显示多少条数据
                }
    		}
    	},
    	mounted() {
    		this.init();
    	},
    	methods: {
    		init(params) {
    			console.log(params);
    			this.$refs.scrollBox.toScrollTop();  //返回顶部
                if(params) this.queryParams = Object.assign(this.queryParams, params);  //es6复制
        		this.$ajax(this.$api.policy.list, this.queryParams , (res)=>{
        			console.log(res);
        			this.newList = res.rows;
    			 	this.total = res.total;
        		}, (error)=>{
        			console.log(error)
        		})
    		},
    		policyFun(name) {  //点击切换标签页回调函数
    			this.queryParams.cate = name == 0 ? '' : name;
    			this.queryParams.page = 1;  //每次切换标签页都初始化页码
    			this.init();
    		},
    		getDetailFun(id, userId, cate) {  //查看详情
    			this.$router.push({path: '/policy/detail', query: {id: id, userId: userId, cate: cate}})
    		}
    	}
    }
</script>

<style lang="less">
.policyBox {
	.ivu-tabs-nav .ivu-tabs-tab {
		width: 96px;
		text-align: center;
		font-size: 16px;
		font-family: PingFangSC-Medium;
	}
	.ivu-tabs-bar {
		border-bottom: none;
	}
	.policy-cont {
		width: @min-width;
		padding: 20px 50px;
		background: #fff;
		.title {
			text-align: center;
			padding: 10% 0;
			font-size: 20px;
			color: @color-Sub;
		}
		.policy-item {
			padding: 30px 0;
			border-bottom: 1px solid @color-Border;
			cursor: pointer;
			&:hover h3 {
				color: @color-Primary;
			}
			h3 {
				height: 28px;
				line-height: 28px;
				color: @color-Title;
				font-size: 20px;
				font-family: PingFangSC-Regular;

			}
			.tips {
				padding: 10px 0 20px;
				.selfCreated {
					padding: 0 15px 0 10px;
					display: inline-block;
				}
				.ivu-tag {
					width: 60px;
					height: 19px;
					padding: 0;
					line-height: 16px;
					text-align: center;
					border-radius: 3px;
					background-color: @color-Sub;
					vertical-align: middle;
					.ivu-tag-text {
						color: #fff;
					}
					&:hover {
						opacity: 1;
						cursor: default;
					}
				}
				span {
					vertical-align: middle;
					color: @color-Sub;
				}
			}
			.article {
				color: @color-Content;
				left: 170px;
				line-height: 20px;
				font-size: 14px;
				text-align: justify;
			}
		}
		.ivu-page {
			margin: 0 auto;
		}
	}
}
</style>
